<template>
  <!-- 主煤流运行监测 -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Left" title="今日运输分析">
    <!-- tab按钮 -->
    <div slot="tab" class="MainCoal-box-tab">
      <div v-for="(item, i) in titletab" :key="i" :class="['btn', isbtn===item?'isbtn':'']" @click="clickTitleTab(item)">{{ item }}</div>
    </div>
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <mould-box
        :datas="mainCoalData.list"
        class="mouldbox"
        :chartTitle="isbtn + '分析'"
        :chartOption="mainCoalData.chartOption"
        :text="[isbtn]"
        :isLineChart="mainCoalData.isLineChart"
        :isDodgeBarChart="mainCoalData.isDodgeBarChart"
        height="9.625rem"
      />
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
export default {

  components: {
    HerinContainer,
    MouldBox
  },
  data() {
    return {
      // 标题按钮
      titletab: ['承载率', '运行时长'],
      isbtn: '承载率',
      chartSpeedData: [
        { x: '00:00', y: 1.2, s: '承载率' },
        { x: '10:00', y: 0.2, s: '承载率' },
        { x: '80:00', y: 3.2, s: '承载率' },
        { x: '12:00', y: 4.2, s: '承载率' },
        { x: '16:00', y: 1.0, s: '承载率' },
        { x: '20:00', y: 2.1, s: '承载率' },
        { x: '24:00', y: 1.2, s: '承载率' }
      ],
      chartTimeData: [
        { x: '主斜井', y: 75, s: '运行时长' },
        { x: '101皮带栈桥', y: 30, s: '运行时长' },
        { x: '4煤胶带大巷一部 ', y: 60, s: '运行时长' },
        { x: '4煤胶带大巷二部', y: 37, s: '运行时长' },
        { x: '4煤西部胶带大巷一部', y: 79, s: '运行时长' },
        { x: '4煤西部胶带大巷二部', y: 42, s: '运行时长' }
      ]
    };
  },
  // 初始赋值
  computed: {
    mainCoalData() {
      const info = {};
      switch (this.isbtn) {
        case '承载率':
          info.list = this.chartSpeedData;
          info.chartOption = {
            color: ['#00FDFF'],
            area: true,
            unit: '%'
          };
          info.isLineChart = true;
          info.isDodgeBarChart = false;
          break;
        case '运行时长':
          info.list = this.chartTimeData;
          info.chartOption = {
            color: ['#00FDFF'],
            area: true,
            unit: 'h'
          };
          info.isLineChart = false;
          info.isDodgeBarChart = true;
          break;
      }
      return info;
    }
  },
  methods: {
    // 点击标题内的tab并切换模拟数据
    clickTitleTab(item) {
      this.isbtn = item;
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-tab{
      display: flex;
      .btn{
        @include btn
    }
    .isbtn{
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
}
</style>
